<template>
  <div class="studyPlan-container">
    <div class="month-container">
      <p>{{ year }}年{{ month }}月</p>
    </div>
    <div id="lists" ref="lists" class="lists">
      <div v-for="(item, index) in list" :key="index" :id="'month'+ item.month" >
        <div v-for="(citem, cindex) in item.list" :key="cindex" class="list" :class="{disabled: citem.learnTime > timestamp}" @click="onReadBook(citem)">
          <img :src="citem.coverImg" />
          <div class="list-main">
            <h3>{{ citem.bookName }}</h3>
            <p class="author">作者:{{ citem.author }}</p>
            <p class="intro">导语:{{ citem.intro }}</p>
          </div>
          <div class="disabled-modal"></div>
        </div>
      </div>
    </div>
    <div class="month-items">
      <p>月份</p>
      <div v-for="(item, index) in list" 
        :key="index" 
        :class="month === item.month ? 'month-item--active' : ''"
        class="month-item" 
         @click="month = item.month">
         {{ item.month }}
      </div>
    </div>
  </div>
</template>
<script>
import {getMyPlan } from '@/api/pay'
export default {
  data() {
    return{
      year: new Date().getFullYear(),
      month: 0,
      timestamp: new Date().getTime(),
      list: []
    }
  },
  watch: {
    month(val) {
      const offtop = this.$el.querySelector(`#month${val}`).offsetTop
      this.$refs.lists.scrollTo({
        top: offtop - 30,
        behavior: 'smooth'
      })
    }
  },
  created() {
    this.getData()
  },
  methods: {
    getData() {
      getMyPlan().then(res => {
        this.list = res.books
        if (res.books && res.books.length) {
          this.$nextTick(() => {
            this.month = res.books[0].month
          })
        }
      })
    },
    onReadBook(item, itemTimestamp) {
      const timestamp = this.timestamp
      if (item.learnTime > timestamp) {
        return
      }
      const { id: bookId, bookName } = item
      this.$router.push({path: '/payPlanPage', query: { bookId, bookName }})
    }
  },
}
</script>
<style lang="less" scoped>

.studyPlan-container{
  position: relative;
  width: 100%;
  height: 100%;
}

.month-container{
  padding: 14px 20px;
  color: #5C7EEB;
  font-size: 16px;
  border-bottom: 1px solid #e8e8e8;
  font-weight: bold;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #fff;
  z-index: 9;
}

.month-items{
  position: fixed;
  right: 16px;
  top: 100px;
  width: 40px;
  text-align: center;
  .month-item{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid #999;
    box-sizing: border-box;
    color: #999;
    line-height: 40px;
    margin-top: 16px;
    &.month-item--active{
      border-color: #5C7EEB;
      color: #5C7EEB;
    }
  }
}
.lists{
  position: relative;
  top: 55px;
  bottom: 0;
  height: calc(100% - 54px);
  padding: 30px 70px 30px 20px;
  overflow-y: auto;
  background: #fff;
}
.list{
  clear: both;
  margin-bottom: .3rem;
  position: relative;
  &.disabled{
    .disabled-modal{
      display: block;
    }
  }
  .disabled-modal{
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: -5px;
    z-index: 2;
    background-color: rgba(0, 0, 0, .6);
  }
  img{
    height: 1.3rem;
    width: 1rem;
    background: #999;
    float: left;
    box-shadow:0px 2px 18px 0px rgba(0,0,0,0.51),0px 1px 1px 0px rgba(255,246,217,0.5);
  }
  .list-main{
    padding-left: .1rem;
    overflow: hidden;
    h3{
      font-size: .24rem;
      line-height: 2;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      display: block;
      width: 100%;
    }
    p{
      font-size: .13rem;
      color: #999;
      line-height: .2rem;
    }
    .author{
      white-space: nowrap;
      text-overflow: ellipsis;
      display: block;
      overflow: hidden;
      width: 100%;
    }
    .intro{
      height: .6rem;
      overflow: hidden;
    }
  }
}

</style>
